<template>
  <div class="game-wrapper">
    <template v-if="$route.path === '/life'">
      <div class="game-title">
        <h5>小游戏</h5>
      </div>
      <div class="game-wrapper_box">
        <div
          class="game-item"
          v-for="(item, index) in gameList"
          :key="index"
          @click="gameHandleClick(item.component)"
        >
          <div class="title">{{ item.name }}</div>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </template>

    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gameList: [
        {
          name: '要还是不要',
          component: 'wantOrNot',
          description: '一款情侣问答游戏'
        }
      ]
    }
  },
  methods: {
    gameHandleClick(component) {
      this.$router.push(`/life/game/${component}`)
    }
  }
}
</script>

<style scoped lang="scss">
.game-wrapper {
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  background: #fff;
  .game-title {
    margin: 10px auto;
    padding: 20px 0 0 20px;
    font-size: 18px;
  }
  .game-wrapper_box {
    display: flex;
    flex-wrap: wrap;
    .game-item {
      width: 15%;
      padding: 10px;
      margin: 10px;
      border: 1px solid #e4ecf3;
      box-shadow: 1px 2px 3px #f2f6f8;
      cursor: pointer;
      background: #fff;
      text-align: center;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #3273dc;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
